<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0;padding:0;}
            #cont{width:500px;height:300px;overflow: hidden;
                  position:relative;float:left;}
            .imga img{width:100%;height:100%;}
            .imga{float:left;width:500px;height:300px;}
            #imgs{width:6000px;position:absolute;z-index:5;}
            .buttons{width:40px;height:40px;background:rgba(0,0,0,0.6);
                     position:absolute;font-size:20px;text-decoration:none;
                     color:#fff;line-height:40px;text-align:center;}
            #butl{left:10px;bottom:10px;}
            #butr{right:10px;bottom:10px;}
            #butc{left:230px;bottom:10px;font-size:40px;}
            #box{left:230px;bottom:50px;}
            .but{width:500px;height:40px;position: absolute;bottom:0px;z-index:10;}
            .bgh{width:500px;height:300px;position: relative;}
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var cont = document.getElementById('cont');
                var imgs = document.getElementById('imgs');
                var butr = document.getElementById('butr');
                var butl = document.getElementById('butl');
                var timer;//定时器
                var speed = -1;//默认速度
                var r = 2;//右移量
                var l = -2;//左移量
                var no = -1;//初始量
				var a = 0;//控制时间
                
                play();
                
                function showt(){
                    butc.style.width = 100 + 'px';
                    butc.style.fontSize = 20 + 'px';
                    butc.style.left = 200 + 'px';
                }//提示文字显示
                
                function leav(){
					a = 0;
                    butc.innerHTML = "·";
                    butc.style.width = 40 + 'px';
                    butc.style.fontSize = 40 + 'px';
                    butc.style.left = 230 + 'px';
                }//提示文字恢复默认
                
                function overd(){
                    setTimeout(function(){
                        leav();
						play();
                    },400);
                }//提示文字定时消失
                
                butr.onclick = function(){
					stop();
						if(speed == r){
							butc.innerHTML = "重复操作";
							showt();//显示文字
							setTimeout(function(){
								overd();
								play();//开始播放
							}, 500);
						}
						else{
							butc.innerHTML = "加速右移";
							showt();
							setTimeout(function(){
								speed = r;//设置2倍速
								leav();
								play();
							}, 500);
						}
                }//右按钮，右移

                butc.onclick = function(){
					stop();
						if(speed == no){
							butc.innerHTML = "重复操作";
							showt();//显示文字
							overd();
						}
						else{
							butc.innerHTML = "复位";//需要显示的文字
							showt();//显示文字
							setTimeout(function(){
								speed = no;//还原默认速度
								leav();//默认文字
								play();//开始循环
							}, 500);
						}
                }

                butl.onclick = function(){
						stop();//暂停半秒
						if(speed == l){
							butc.innerHTML = "重复操作";
							showt();
							overd();
						}
						else{
							butc.innerHTML = "加速左移";
							showt();
							setTimeout(function(){
								speed = l;//设置2倍速
								leav();
								play();//开始播放
						}, 500);
					}  
                }//左按钮，左移
                
                /*自动播放*/
                function play(){
					stop();
                    timer = setInterval(function (){//每隔30毫秒执行一次函数，无限循环
                        var p = imgs.offsetLeft;
                        imgs.style.left = p + speed + 'px';
                        //改变1de left值
                        if(p < -imgs.offsetWidth / 2){
                            imgs.style.left = 0 + 'px';
                         }else if(p > 0){
                            imgs.style.left = -imgs.offsetWidth / 2 + 'px';
                         }
                        }, 30);
                }

                function stop(){
                    clearInterval(timer);
                }//停止循环
				
                cont.onmouseover = stop;//鼠标覆盖则停止
                cont.onmouseout = play;//鼠标移开则开始
                
            }
        </script>
    </head>
    <body>
    <div class="bgh">
        <div id="cont">
           <div class="fla">
                <div id="imgs" style="left:0px;">
                    <a href="#" class="imga"><img src="01.jpg" alt="01.jpg" /></a>
                    <a href="#" class="imga"><img src="02.jpg" alt="02.jpg" /></a>
                    <a href="#" class="imga"><img src="03.jpg" alt="03.jpg" /></a>
                    <a href="#" class="imga"><img src="04.jpg" alt="04.jpg" /></a>
                    <a href="#" class="imga"><img src="05.jpg" alt="05.jpg" /></a>
                    <a href="#" class="imga"><img src="06.jpg" alt="06.jpg" /></a>

                    <a href="#" class="imga"><img src="01.jpg" alt="01.jpg" /></a>
                    <a href="#" class="imga"><img src="02.jpg" alt="02.jpg" /></a>
                    <a href="#" class="imga"><img src="03.jpg" alt="03.jpg" /></a>
                    <a href="#" class="imga"><img src="04.jpg" alt="04.jpg" /></a>
                    <a href="#" class="imga"><img src="05.jpg" alt="05.jpg" /></a>
                    <a href="#" class="imga"><img src="06.jpg" alt="06.jpg" /></a>
                </div>
            </div>
        </div>
        <div class="but">
            <a href="javascript:;" class="buttons" id="butr">→</a>
            <a href="javascript:;" class="buttons" id="butc">·</a>
            <a href="javascript:;" class="buttons" id="butl">←</a>
        </div>
    </div>
    </body>

</html>